<script setup>
import Header from "@/modules/module4/modules4-War/components/Header.vue";
import SideShow from "@/modules/module4/modules4-War/components/SideShow.vue";
import { ref } from 'vue';
import image1 from '../assets/image/411.jpg';
import image2 from '../assets/image/412.jpg';
import image3 from '../assets/image/413.jpg';

const items = ref([
  { image:  image1, title: '国家统一与民族复兴', description: '解放战争结束了中国长期以来军阀割据局面，实现了国家的统一和民族的团结。通过战争的胜利，中国共产党领导的人民军队成功地将分裂的地区重新整合为一个统一的国家，这不仅消除了内战带来的社会动荡和人民苦难，也为国家经济的恢复和发展奠定了坚实的基础。' },
  { image:  image2, title: '政治制度的建立与社会变革', description: '解放战争的胜利标志着中国从封建社会和官僚资本主义时代向社会主义时代的转变。新政权通过土地改革、经济建设等政策，逐步建立起了社会主义经济体系和政治体制。这些改革不仅结束了封建剥削和资本主义压迫，还推动了社会的进步，为中国的现代化建设开辟了新的道路。' },
  { image:  image3, title: '国际地位的提升与世界影响', description: '解放战争的胜利使中国在国际社会的地位显著提升。作为战胜国，中国不仅恢复了在联合国的合法席位，成为联合国安理会常任理事国，还在国际事务中发挥了越来越重要的作用。中国的胜利也增强了世界人民对于社会主义制度优越性的认识，为世界和平与发展作出了重要贡献。' },
]);
</script>

<template>
  <div class="contain">
    <Header />
  <SideShow />
  <div class="container">
    <div class="flip-card" v-for="(item, index) in items" :key="index">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img :src="item.image" :alt="item.title" />
        </div>
        <div class="flip-card-back">
          <div class="card-content">
            <h2 class="card-title">{{ item.title }}</h2>
            <p class="card-description">{{ item.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
 
</template>

<style scoped>
.contain{
  font-family: "microsoft yahei, arial, helvetica, sans-serif";
    font-size: 16px;
    background-image: url("../assets/image/400.jpeg");
    background-size: cover; /* 覆盖整个页面 */
    background-position: center; /* 居中显示 */
    background-attachment: fixed; /* 固定背景，不随滚动条滚动 */
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: "Open Sans", sans-serif;
  gap: 20px; /* Adjust the gap between cards */
  padding: 20px;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
  overflow: hidden; /* Ensures the image fills the container */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the entire container */
}

.flip-card-back {
  background-color:rgba(255, 255, 255, 0.3);
  color: black;
  transform: rotateY(180deg);
}

.card-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.card-description {
  font-size: 16px;
}
</style>
